<template>
  <div class='u-selectAttrList'>
    <el-row type='flex'>
      <el-col :span='18'>
        <el-select   v-model='selectAttr.id' @change='getClasses'>
          <el-option v-for='v in attrList' :key='v.id' :label='v.name' :value='v.id'/>
        </el-select>
        <el-select   v-show='selectAttr.id' v-model='selectClasses.id' @change='getClasses2'>
          <el-option v-for='v in classes' :key='v.id' :label='v.name' :value='v.id'/>
        </el-select>
        <el-select   v-show='selectClasses.id' v-model='selectClasses2.id' @change='changeClassese'>
          <el-option v-for='v in classes2' :key='v.id' :label='v.name' :value='v.id'/>
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'su-selectAttrList',

    props: ['aType'],

    data() {
      return {
        attrList: [],
        selectAttr: {
          id: '',
          name: ''
        },
        classes: [],
        selectClasses: {
          id: '',
          name: ''
        },
        classes2: [],
        selectClasses2: {
          id: '',
          name: ''
        },
        cols: [
          {label: '商品名称', prop: 'name'},
          {label: '属性类别', prop: 'title'},
          {label: '价格', prop: 'price'}]
      }
    },

    mounted() {
      this.getAllAttrAndClass()
    },

    methods: {
      async getAllAttrAndClass() {
        const {code, data} = await this.$api.utilsGetAllClasses({
          aMerchantId: this.aFirmId, aType: this.aType
        })
        if (code === 0) {
          this.formatAttrAndClassData(data.list)
        }
      },

      formatAttrAndClassData(data) {
        this.attrList = data.map(v => {
          const classes = []
          v.classes.forEach(v2 => {
            if (!v2.pid && !v2.pvalue) {
              classes.push({
                ...v2,
                child: []
              })
            }
          })
          v.classes.forEach(v2 => {
            const parId = v2.pid || v2.pvalue
            if (parId) {
              classes.some(v3 => {
                if (parId === v3.id) {
                  v3.child.push(v2)
                  return true
                }
              })
            }
          })
          return {
            ...v,
            classes
          }
        })
      },

      getClasses(value) {
        this.classes = []
        this.classes2 = []
        this.selectClasses = {
          id: '',
          name: ''
        }
        this.selectClasses2 = {
          id: '',
          name: ''
        }
        this.classes = this.attrList.filter(v => v.id === value)[0].classes
        this.getName('selectAttr', this.attrList, value)
        this.emit()
      },

      getClasses2(value) {
        this.classes2 = []
        this.selectClasses2 = {
          id: '',
          name: ''
        }
        this.classes2 = this.classes.filter(v => v.id === value)[0].child
        this.getName('selectClasses', this.classes, value)
        this.emit()
      },

      changeClassese(value) {
        this.getName('selectClasses2', this.classes2, value)
        this.emit()
      },

      emit() {
        let arry = [this.selectAttr, this.selectClasses, this.selectClasses2].filter((o) => {
          return o.id !== ''
        })
        this.$emit('update', arry)
      },
      getName(attr, list, val) {
        this[attr].name = list.find((item) => {
          return item.id === val
        }).name
      }
    }
  }
</script>

<style lang='less'>
  .u-selectAttrList {
    .el-row {
      align-items: center;
      padding-bottom: 20px;
    }
  }
</style>
